<div>
  <form nz-form [formGroup]="validateForm" (ngSubmit)="_submitForm()">
    <!-- username -->
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
        <label for="username" nz-form-item-required>Username</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <nz-input [nzSize]="'large'" formControlName="username" [nzId]="'username'"></nz-input>
        <div nz-form-explain
          *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('username')">
          The input is not valid Username!
        </div>
      </div>
    </div>
    <!-- row for email -->
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
        <label for="email" nz-form-item-required>E-mail</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <nz-input [nzSize]="'large'" formControlName="email" [nzId]="'email'"></nz-input>
        <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">
          The input is not valid E-mail!
        </div>
      </div>
    </div>
    <!-- Real name -->
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
        <label for="realname">Realname</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <nz-input [nzSize]="'large'" formControlName="realname" [nzId]="'realname'"></nz-input>
      </div>
    </div>
    <!-- Realm -->
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
        <label for="realm">Realm</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <nz-input [nzSize]="'large'" formControlName="realm" [nzId]="'realm'"></nz-input>
      </div>
    </div>

    <div class="customize-footer">
      <button type="button" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="handleCancel($event)">
        返 回
      </button>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'" [nzLoading]="isConfirmLoading">
        修 改
      </button>
    </div>
  </form>
</div>